<script lang="ts" setup>
import { RouterView } from 'vue-router'
import AsideSchool from '@/components/AsideSchool.vue'
import AsideClass from '@/components/AsideClass.vue'
import AsideDepartment from '@/components/AsideDepartment.vue'
import MyHeader from '@/components/MyHeader.vue'
import { useAuthStore } from '@/stores/auth'
const authStore = useAuthStore()

// 根据用户类型，切换侧边栏
const role = authStore.userInfo['role']


</script>

<template>
  <div class="common-layout">
    <el-container>
      <el-aside width="210px">
        <!-- 侧边栏 -->
        <AsideSchool v-if="role === 'admin'"></AsideSchool>
        <AsideClass v-else-if="role === 'class'"></AsideClass>
        <AsideDepartment v-else-if="role === 'department'"></AsideDepartment>
      </el-aside>
      <el-container>
        <el-header height="86px">
          <MyHeader></MyHeader>
        </el-header>
        <el-main>
          <RouterView />
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>


<style scoped>
.common-layout .el-aside {
  height: 100vh;
  background: #192a5e;
}

.common-layout .el-header {
  background: #eef4f9;
}

.common-layout .el-main {
  background: #f9fafb
}
</style>